/**
* @Author: 李晨光
* @Date: 2019/12/18
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/18
**/
<comment>
  # 积分我的积分
</comment>
<template>
  <div id="Integration" class="p-box">
    <div class="p-return" style="box-shadow:none">
      <mu-appbar color="primary" class="lan-header" style="box-shadow:none">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>我的积分
      </mu-appbar>
    </div>
    <div class="p-content">
      <div class="board-box">
        <dl class="dl">
          <dt class="dl-title">总积分</dt>
          <dt class="dl-main" style="text-align:center">{{totalScore}}</dt>
          <dd class="dl-config" style="text-align:center">
            <span class="btn" @click="goUpSubmit">赚取积分</span>
          </dd>
        </dl>
      </div>
      <div class="media-box">
        <div class="media" @click="goShop">
          <div class="media-left">
            <div class="media-img">
              <img :src="supriseImg" alt />
            </div>
            <div class="media-body">
              <dl>
                <dt>线下商店兑换福利</dt>
                <dd>
                  可兑换积分：
                  <span>{{leftScore}}</span>
                </dd>
              </dl>
            </div>
          </div>
          <div class="media-right">
            <i class="iconfont iconangle-right"></i>
          </div>
        </div>
      </div>
      <div class="li-box">
        <div class="li" @click="goRules">
          <p class="li-left">
            <i class="iconfont iconwenhao1"></i>
            <span>积分攻略</span>
          </p>
          <p class="li-right">
            <i class="iconfont iconangle-right"></i>
          </p>
        </div>
        <div class="li" @click="goDetail">
          <p class="li-left">
            <i class="iconfont iconjifenmingxi"></i>
            <span>积分明细</span>
          </p>
          <p class="li-right">
            <i class="iconfont iconangle-right"></i>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Integration",
  components: {},
  props: {},
  data() {
    return {
      wenhaoImg: require("#/assets/img/wenhao.png"),
      mxImg: require("#/assets/img/mx.png"),
      supriseImg: require("#/assets/img/integration/suprise.png"),
      integration: 0,
      totalScore: 0,
      leftScore: 0
    };
  },
  computed: {},
  created() {
    this.initTotal();
  },
  mounted() {},
  watch: {},
  methods: {
    initTotal() {
      this.$openLoading();
      this.$A
        .Go("get", "/safety/userScore/myScore", {
          userId: this.$A.GS("userInfo")["userId"]
        })
        .then(res => {
          this.$closeLoading();
          if (res.code == 200) {
            if (res.body) {
              this.totalScore = res.body.totalScore;
              this.leftScore = res.body.leftScore;
            }
            // this.form.pointList = array;
          } else {
          }
        });
    },
    goUpSubmit() {
      this.$router.push({
        name: "IssueReport"
      });
    },
    goShop() {
      this.$router.push({
        name: "IntegrationShop"
      });
    },
    goDetail() {
      this.$router.push({
        name: "IntegrationDetail"
      });
    },
    goRules() {
      this.$router.push({
        name: "IntegrationRules"
      });
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
#Integration {
  .media-box {
    position: relative;
    height: 0.62rem;
    box-shadow: 0rem 0.01rem 0rem 0rem rgba(224, 224, 224, 1);
    .media {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 3.47rem;
      height: 0.85rem;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0rem 0.02rem 0.07rem 0rem rgba(0, 128, 203, 0.29);
      border-radius: 0.04rem;
      display: flex;
      justify-content: space-between;
      padding: 0 0.17rem;
      .media-left {
        height: 100%;
        display: flex;
        align-items: center;
        .media-img {
          width: 0.85rem;
          margin-right: 0.1rem;
          img {
            width: 100%;
            height: auto;
          }
        }
        .media-body {
          height: 100%;
          display: flex;
          align-items: center;
          dt {
            font-size: 0.15rem;
            font-weight: 600;
            color: rgba(61, 61, 61, 1);
            margin-bottom: 0.05rem;
          }
          dd {
            font-size: 0.13rem;
            color: rgba(140, 140, 140, 1);
          }
        }
      }
      .media-right {
        height: 100%;
        display: flex;
        align-items: center;
        color: #dbdbdb;
      }
    }
  }
  .li-box {
    .li {
      height: 0.55rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.14rem;
      box-shadow: 0rem 0.01rem 0rem 0rem rgba(224, 224, 224, 1);
    }
    .li-left {
      height: 100%;
      display: flex;
      align-items: center;
      .iconfont {
        color: #0080cb;
        font-size: 0.23rem;
        margin-right: 0.15rem;
      }
    }
    .li-right {
      color: #dbdbdb;
    }
  }
}
</style>
